<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-yellow" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">
					<p style="font-weight: 600;">计分板</p>
				</block>
			</cu-custom>
			<view>
				<view class="cu-list grid" open-type="share" :class="['col-' + gridCol,gridBorder?'':'no-border']" v-show="!iserror">
					<view class="cu-item" v-for="(item,index) in cuIconList1" :key="index" @click="play(item)">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + (item.tag==='record' || !isend?item.textColor:'gray')]">
						</view>
						<view><text class="text-xs">{{item.name}}</text></view>
					</view>
				</view>
			</view>
			<view class="home-bottom">
				<view>
					<view class="cu-list menu sm-border">
						<view class="cu-item" v-for="(item,index) in table.participant" :key="item.id">
							<view style="width: 100%;">
								<view class="cu-list menu-avatar">
									<view class="cu-item">
										<view class="cu-avatar lg radius bg-gray" :style="item.portrait">
											<view v-show="item.identity!=1" class="cu-tag badge" :class="[identityBgcolor(item.identity)]">{{identityLabel(item.identity)}}</view>
										</view>
										<view class="content">
											<view class="margin-left-sm">{{item.name}}</view>
											<view class="margin-left-sm text-red" :class="[item.score>=0?'text-red':'text-green']">{{item.score>=0?'赢':'输'}}：{{scoreFormat(item.score)}}</view>
										</view>
										<view class="action text-sl" @tap="showModal" data-target="bottomModal" v-show="!isend">
											<view class="cu-tag bg-green">给分</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding text-lg" style="text-align: center;" v-show="isend"> ------ 当前牌局已结束 ------</view>
				<view class="padding text-lg" style="text-align: center;" v-show="iserror"> ------ 找不到牌局 ------</view>
			</view>
		</scroll-view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<view class="padding">
					<view class="mybrankmask">
						<view>
							<view style="width: 100%;">
								<view class="cu-list menu-avatar ">
									<view class="cu-item">
										<view style="width: 100%;">
											<view class="flex solid-bottom padding justify-center align-center">
												<view class="text-grey padding-right-lg">给分至： </view>
												<view class="cu-avatar radius bg-gray" :style="avatarUrl">
													<view class="cu-tag badge bg-grey">iu</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="padding: 20rpx;">
							<view class="MymaskList">
								<view class="maskListItem1">
									<text>{{myValue}}</text>
								</view>
								<view class="maskListItem" style="background-color: #cacdd5;color: #fff;"
									@click="Backword()">回退</view>
							</view>
							<view class="MymaskList">
								<view class="maskListItem" @click="NumberCk(1)">1</view>
								<view class="maskListItem" @click="NumberCk(2)">2</view>
								<view class="maskListItem" @click="NumberCk(3)">3</view>
							</view>
							<view class="MymaskList">
								<view class="maskListItem" @click="NumberCk(4)">4</view>
								<view class="maskListItem" @click="NumberCk(5)">5</view>
								<view class="maskListItem" @click="NumberCk(6)">6</view>
							</view>
							<view class="MymaskList">
								<view class="maskListItem" @click="NumberCk(7)">7</view>
								<view class="maskListItem" @click="NumberCk(8)">8</view>
								<view class="maskListItem" @click="NumberCk(9)">9</view>
							</view>
							<view class="MymaskList">
								<view class="maskListItem" style="background-color: #FFA500;color: #fff;"
									@click="Cancelword()">取消</view>
								<view class="maskListItem" @click="NumberCk(0)">0</view>
								<view class="maskListItem" style="background-color: #31BDEC;color: #fff;"
									@click="Submitword()">确认</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detail
	} from '@/api/mahjong.js';
	export default {
		data() {
			return {
				cuIconList1: [{
					cuIcon: 'friendadd',
					textColor: 'green',
					name: '邀请桌友',
					router: '/pages/games/mahjong/invitation',
					tag:'invitation'
				}, {
					cuIcon: 'refund',
					textColor: 'yellow',
					name: '得失记录',
					router: '/pages/games/mahjong/record',
					tag:'record'
				}, {
					cuIcon: 'exit',
					textColor: 'green',
					name: '结束对局',
					router: null,
					tag:'stop'
				}, {
					cuIcon: 'notificationforbidfill',
					textColor: 'gray',
					name: '语音播报',
					router: null,
					tag:'broadcast'
				}],
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				avatarUrl: "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
				myValue: '',
				arrValue: [],
				nowTableid:'0',
				table: {},
				isend:true,
				iserror:false
			}
		},
		onLoad() {
			const query = this.$mp.query;
			this.nowTableid = query.id;
			
		},
		mounted() {
			this.detail();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.arrValue = [];
				this.myValue = null;
				this.modalName = null;
			},
			// 菜单跳转
			play(item) {
				if (item.router != null) {
					let _user=uni.getStorageSync('userinfo');
					// 跳转邀请
					if(item.tag==='invitation' && !this.isend)
					{
						uni.navigateTo({
							url: item.router+'?id='+this.table.id+'&owner='+this.table.owner,
						})
					}
					// 跳转记录
					else if(item.tag==='record' && !this.iserror)
					{
						uni.navigateTo({
							url: item.router+'?id='+this.table.id,
						})
					}
					// 结束本剧
					else if(item.tag==='stop' && !this.isend)
					{
						
					}
					// 打开语音提醒
					else if(item.tag==='broadcast' && !this.isend)
					{
						
					}
				}
			},
			identityLabel(identity) {
				var label = '';
				switch (identity) {
					case 0:
						label = '房主';
						break;
					case 1:
						label = '';
						break;
					case 2:
						label = '旁观';
						break;
					case 3:
						label = '买码';
						break;
				}
				return label;
			},
			identityBgcolor(identity) {
				var color = '';
				switch (identity) {
					case 0:
						color = 'bg-red';
						break;
					case 1:
						color = '';
						break;
					case 2:
						color = 'bg-grey';
						break;
					case 3:
						color = 'bg-orange';
						break;
				}
				return color;
			},
			scoreFormat(score){
				if(score<0){
					return score*-1;
				}else{
					return score;
				}
			},
			NumberCk(num) {
				this.arrValue.push(num);
				this.myValue = this.arrValue.join('');
			},
			Backword() {
				if (this.arrValue.length > 0) {
					this.arrValue = this.arrValue.slice(0, this.arrValue.length - 1)
					this.myValue = this.arrValue.join('');
				}
			},
			Cancelword() {
				this.arrValue = [];
				this.myValue = null;
				this.modalName = null;
			},
			Submitword() {
				this.Cancelword();
			},
			detail(){
				detail(this.nowTableid).then(res=>{
					if(res.data.data!=null)
					{
						this.table=res.data.data;
						this.isend=res.data.data.status!=0;
						console.log(this.isend);
					}
					else{
						this.isend = false;
						this.iserror=true;
					}
				})
			}
		}
	}
</script>

<style>
	.home-bottom {
		padding-bottom: 140rpx;
	}

	.Numberinput {
		display: flex;
		align-items: center;
	}

	.myfous {
		width: 1rpx;
		height: 41rpx;
		background-color: #000;
		display: block;
		animation: mytreat 1.5s linear infinite;
	}

	.mybrankmask {
		width: 100%;
		height: 720rpx;
		background-color: #EBEEF5;
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: 0;
	}

	.mybrankmask .MymaskList {
		display: flex;
		width: 100%;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.mybrankmask .MymaskList .maskListItem {
		width: 30%;
		height: 90rpx;
		background-color: #fff;
		text-align: center;
		line-height: 90rpx;
		border-radius: 10rpx;
	}

	.mybrankmask .MymaskList .maskListItem1 {
		width: 64%;
		height: 90rpx;
		background-color: #fff;
		text-align: center;
		line-height: 90rpx;
		border-radius: 10rpx;
	}

	//自定义光标模拟Input焦点
	@keyframes mytreat {

		/*开始画面*/
		0% {
			background-color: #000;
		}

		50% {
			background: none;
		}

		100% {
			background-color: #000;
		}
	}
</style>